<template>
	<div class="mt-10">
		<div class="flex items-center gap-1">
			<base-icon name="hint" class="text-[26px]" color="#7864ff" />
			<p class="text-lg text-t-1">{{ $t('question.title') }}</p>
		</div>
		<div class="mt-5">
			<n-collapse arrow-placement="right">
				<n-collapse-item :title="$t('question.categories.common')" name="1">
					<div class="text-box flex flex-col justify-center">
						<div>{{ $t('question.common.betterVIP.q') }}</div>
						<div style="color: #bbc5c7">{{ $t('question.common.betterVIP.a') }}</div>
					</div>
					<div class="text-box flex flex-col justify-center">
						<div>{{ $t('question.common.freeToJoin.q') }}</div>
						<div style="color: #bbc5c7">{{ $t('question.common.freeToJoin.a') }}</div>
					</div>
					<div class="text-box flex flex-col justify-center">
						<div>{{ $t('question.common.howToVIP.q') }}</div>
						<div style="color: #bbc5c7">{{ $t('question.common.howToVIP.a') }}</div>
					</div>
					<div class="text-box flex flex-col justify-center">
						<div>{{ $t('question.common.xpCalc.q') }}</div>
						<div style="color: #bbc5c7">{{ $t('question.common.xpCalc.a') }}</div>
					</div>
				</n-collapse-item>
			</n-collapse>
			<div style="margin-top: 10px">
				<n-collapse arrow-placement="right">
					<n-collapse-item :title="$t('question.categories.benefits')" name="2">
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.benefits.rewardsCalc.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.benefits.rewardsCalc.a') }}</div>
						</div>
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.benefits.withdrawal.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.benefits.withdrawal.a') }}</div>
						</div>
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.benefits.levelUp.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.benefits.levelUp.a') }}</div>
						</div>
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.benefits.copyRebate.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.benefits.copyRebate.a') }}</div>
						</div>
					</n-collapse-item>
				</n-collapse>
			</div>
			<div style="margin-top: 10px">
				<n-collapse arrow-placement="right">
					<n-collapse-item :title="$t('question.categories.vipService')" name="3">
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.vipService.what.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.vipService.what.a') }}</div>
						</div>
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.vipService.how.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.vipService.how.a') }}</div>
						</div>
						<div class="text-box flex flex-col justify-center">
							<div>{{ $t('question.vipService.diff.q') }}</div>
							<div style="color: #bbc5c7">{{ $t('question.vipService.diff.a') }}</div>
						</div>
					</n-collapse-item>
				</n-collapse>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { NCollapse, NCollapseItem } from 'naive-ui'
import { BaseIcon } from '@/components/base'
</script>
<style lang="scss" scoped>
:deep(.n-collapse-item__header) {
	padding: 0 !important;
}

:deep(.n-collapse-item__header-main) {
	border-bottom: 1px solid #96a5aa26;
	padding-left: 10px;
	padding-right: 10px;
	height: 52px;
	justify-content: space-between;
}

:deep(.n-collapse-item) {
	margin: 0 !important;
}

:deep(.n-collapse) {
	margin: 0 !important;
	border-radius: 8px;
	background: #1b2538;
}

.text-box {
	padding: 20px 20px 20px 20px;
	border-bottom: 1px solid #96a5aa26;
}

:deep(.n-collapse-item__content-inner) {
	padding: 0 20px;
}
</style>
